<template>
  <div>
    <div :class='s.up'>
      <i class='iconfont icon-zhengque-copy'></i>
      <div :class='s.words'>
        <div :class='s.registered'>已报名</div>
        <div :class='s.rank'>我的排名: {{rank === -1 ? '--' : rank}}</div>
      </div>
    </div>
    <div :class='s.down'>
      <template v-if='gameStep === "0" || gameStep === "1" || gameStep === "2" || gameStep === "3"'>
        <div :class='s.bt +" " + s.trade' @click='onTrade'>比赛交易</div>
        <div :class='s.bt +" " + s.hold' @click='onHold'>查比赛持仓</div>
      </template>
      <div :class='s.unBegin' v-if='gameStep === "0" || gameStep === "1" || gameStep === "2"'>距离比赛开始只剩{{this.beginDateLeft}}天</div>
    </div>
  </div>
</template>

<script>
import LocalDAO from 'common/localDAO'
import RemoteDAO from 'common/remoteDAO'
import CommonUtil from 'common/common.util'
export default {
  props: {
    gameStep: {
      type: String,
      default: '0'
    },
    gameBeginDate: String,
    gameName: String
  },
  data () {
    return {
      rank: '- -',
      beginDateLeft: ''
    }
  },
  mounted () {
    console.info('gameStep', this.gameStep)
    this.fetchMyRank()
    this.initBeginDate()
  },
  watch: {
    gameStep: function (val) {
      this.fetchMyRank()
    }
  },
  methods: {
    initBeginDate () {
      this.beginDateLeft = new Date(CommonUtil.formatDateSlash(this.gameBeginDate))
      this.beginDateLeft = this.beginDateLeft.getTime() - new Date().getTime()
      this.beginDateLeft = Math.round(this.beginDateLeft / (24 * 60 * 60 * 1000))
    },
    onHold () {
      this.$router.push({path: '/game/gameselfdetail', query: {gameId : this.$route.query.gameId, gameName: this.gameName}})
    },
    onTrade () {
      this.$router.push({path: '/trade/buyin', query: {gameId: this.$route.query.gameId}})
    },
    fetchMyRank () {
      if (this.gameStep !== '3' && this.gameStep !== '4') return
      var args = {
        game_id: this.$route.query.gameId,
        client_id: LocalDAO.getUserCode()
      }
      RemoteDAO.callJCL30028(args, resp => {
        if (resp.error === '0' && resp.data.body.data.length > 0) {
          this.rank = resp.data.body.data[0].ranknum
          this.updateShareRank()
        } else {
          this.$store.dispatch('setTip',{text:resp.data})
        }
      })
    },
    updateShareRank () {
      // 更新分享页数据
      var shareGameDetails = LocalDAO.getShareGameDetails()
      shareGameDetails.overview.myRanking = this.rank
      LocalDAO.setShareGameDetails(shareGameDetails)
    }
  }
}
</script>

<style lang="less" module='s'>
.up{
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: repeat;
  background-size: 30px 30px;
  -webkit-background-size: 30px 30px;
  background-image: linear-gradient(-45deg,#ee6c33 25%,transparent 25%,transparent 50%,#ee6c33 50%,#ee6c33 75%,transparent 75%,transparent);
  background-image: -webkit-linear-gradient(-45deg,#ee6c33 25%,transparent 25%,transparent 50%,#ee6c33 50%,#ee6c33 75%,transparent 75%,transparent);
  i{
    font-size: 34px;
    color: #c2f892;
    // font-weight: bold;
  }
  .words{
    text-align: left;
    .registered{
      font-size: 20px;
      color: #ffe867;
      font-weight: bold;
    }
    .rank{
      color: #67220c;
      font-size: 12px;
    }
  }
}
.down{
  display: flex;
  position: relative;
  background-color: #e15f25;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  margin: 20px 10px auto 10px;
  .bt{
    flex: 1;
    height: 36px;
    font-size: 16px;
    font-weight: bold;
    line-height: 36px;
    border-radius: 10px;
    margin: 5px;
  }
  .trade{
    background-color: #fff005;
    color: #a33815;
  }
  .hold{
    background-color: #fff;
    color: #938cac;
  }
  .unBegin{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: rgba(0,0,0,0.6);
    color: rgba(255,255,255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
  }
}
</style>